<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <h3>{{ isCollapse ? '产线' : '数字产线员工系统' }}</h3>
      <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
        <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.label }}</span>
      </el-menu-item>
      <el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
        <template slot="title">
          <i :class="`el-icon-${item.icon}`"></i>
          <span slot="title">{{ item.label }}</span>
        </template>
        <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
          <el-menu-item @click="clickMenu(subItem)" :index="subItem.path">{{ subItem.label }}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
</template>
    
  <style lang="less" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  .el-menu {
    height: 100vh;
    h3 {
      color: #fff;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      font-weight: 400;
    }
  }
  </style>
    
  <script>
  export default {
    data() {
      return {
        menuData: [
          {
            path: "/",
            name: "home",
            label: "首页",
            icon: "s-home",
            url: "Home/Home",
          },
          {
            path: "/problems",
            name: "problems",
            label: "数据统计",
            icon: "warning-outline",
            url: "MallManage/MallManage",
          },
          {
            path: "/user",
            name: "user",
            label: "员工管理",
            icon: "user",
            url: "UserManage/UserManage",
          },
          {
            label: "其他",
            icon: "location",
            children: [
              {
                path: "/page1",
                name: "page1",
                label: "页面一",
                icon: "setting",
                url: "Other/PageOne",
              },
              {
                path: "/page2",
                name: "page2",
                label: "页面二",
                icon: "setting",
                url: "Other/PageTwo",
              },
            ],
          },
        ]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      //点击菜单
      clickMenu(item){
        console.log(item);
        //当页面路由和跳转路由不一致的情况才允许跳转
        if(this.$route.path !== item.path && !(this.$route.path === '/home' && (item.path === '/'))){
          this.$router.push(item.path);
        }
      }
    },
    computed: {
      //没有子菜单
      noChildren(){
        return this.menuData.filter(item => !item.children)
      },
      //有子菜单
      hasChildren(){
        return this.menuData.filter(item => item.children)
      },
      isCollapse(){
        return this.$store.state.tab.isCollapse
      }
    }
  }
  </script>
  <style lang="less" scoped>
  .el-menu {
    border-right: none;
  }
  </style>